<template>
    <div class="chatNavBar">
        <van-nav-bar :title="user.currentInfo.nickname" left-arrow @click-left="onClickLeft" :fixed="true" />
    </div>
    <div class="chatContainer">
        <div class="message">
            <chatItem v-for="(item, index) in user.getMessageList(id)" :messageInfo="item" :key="index"></chatItem>
        </div>
    </div>
    <div class="bottomInput">
        <div>
            <!-- <textarea class="my-textarea" value="sendMessage" maxlength="-1" /> -->
            <van-cell-group inset>
                <van-field v-model="message" rows="1" autosize class="textContent" type="textarea" />
            </van-cell-group>
        </div>
        <van-button type="success" @click="sendMessage" class="sendBtn">发送</van-button>
    </div>
</template>
<script setup lang='ts'>
import chatItem from '@/components/chatItem.vue';
import { useRouter } from 'vue-router';
import { ref, getCurrentInstance, onMounted } from 'vue';
import { userStore } from '@/store';
import { message } from '@/model';
const user = userStore();
const router = useRouter();
const id: any = router.currentRoute.value.query.id;
let message = ref('');
//@ts-ignore
const { proxy } = getCurrentInstance()

onMounted(() => {
    if (!user.chaterInfoList.some(item => item.id == id)) {
        user.getChaterInfo(id);
        user.addMessageInfo(id);
    } else {
        //@ts-ignore
        user.currentInfo = user.chaterInfoList.find(item => item.id == id)
    }
})
const sendMessage = () => {
    if (message.value !== '') {
        const data = { message: message.value, senderId: user.userInfo.id, receiverId: id }
        proxy.$socket.emit('receive', data)
        user.addMessage(data, data.receiverId)
        message.value = ''
    }
}
const onClickLeft = () => {
    router.back()
    //socket.disconnect()
}
</script>
<style lang='less' scoped>
.chatContainer {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    margin-top: 2.875rem;
}

.message {
    min-height: 100vh;
    background: rgb(245, 245, 245);
    padding-bottom: 4rem;
    box-sizing: border-box;
}

.bottomInput {
    display: grid;
    position: fixed;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #ededed;
    grid-template-columns: auto 4rem;
    grid-template-rows: auto;


    .sendBtn {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        height: 2rem;
    }
}
</style>
